<template>
  <div class="cart">
    <el-table :data="cartStore.items" style="width: 100%">
      <!-- 添加一列用于显示产品照片 -->
      <el-table-column label="产品照片">
        <template #default="{ row }">
          <img :src="row.images" alt="Product Image" style="width: 80px; height: 80px; border-radius: 5px;">
        </template>
      </el-table-column>
      <el-table-column prop="name" label="商品名称"></el-table-column>
      <el-table-column prop="price" label="价格"></el-table-column>
      <el-table-column label="数量">
        <template #default="{ row }">
          <el-input-number v-model="row.quantity" :min="1" @change="() => updateQuantity(row)"></el-input-number>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="{ row }">
          <el-button @click="() => removeItem(row.id)">移除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="total-price">
      总价：{{ cartStore.totalPrice }}
      <!-- 添加购买按钮 -->
      <el-button type="primary" @click="checkout">购买</el-button>
    </div>
  </div>
</template>

<script setup>
import { useCartStore } from '../stores/cartStore';

const cartStore = useCartStore();

// 更新商品数量的函数
const updateQuantity = (item) => {
if (item.quantity <= 0) {
  cartStore.removeItem(item.id);
} else {
  cartStore.updateItemQuantity(item.id, item.quantity);
}
};

// 移除商品的函数
const removeItem = (id) => {
cartStore.removeItem(id);
};

// 购买按钮的点击事件处理函数（这里只是示例，可根据实际需求完善购买逻辑）
const checkout = () => {
// 可以在这里添加购买相关的逻辑，比如发送请求到后端处理订单等
console.log('执行购买操作');
}
</script>

<style>
.cart {
  margin: 30px; /* 适当增加与上方内容的间距 */
  background-color: #fff; /* 将背景色改为白色，与页面整体风格协调 */
  border-radius: 10px;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.15); /* 加深阴影效果，使组件更有立体感 */
  padding: 20px; /* 增加内边距，使内容在容器内有更多空间 */
}

.el-table {
  width: 100%;
  border-collapse: collapse; /* 合并表格边框，使表格看起来更简洁 */
  background-color: #f9f9f9; /* 设置表格背景色为浅灰色，与整体风格协调 */
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.el-table-column {
  border: 1px solid #ccc; /* 为表格列添加边框，使表格结构更清晰 */
  padding: 15px; /* 增加表格单元格内边距，使内容有一定空间 */
  text-align: center; /* 让表格内容居中显示 */
}

.el-input-number {
  width: 80px; /* 固定输入框宽度，使布局更规整 */
  margin: 0 auto; /* 让输入框在表格单元格内居中显示 */
}

.el-button {
  background-color: #007BFF;
  color: white;
  border: none;
  border-radius: 5px;
  padding: 10px 20px; /* 调整内边距，使其与表格布局更协调 */
  font-size: 16px; /* 适当增大字体大小，提高可读性 */
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.el-button:hover {
  background-color: #0056b3;
}

.total-price {
  margin-top: 30px; /* 增加与表格的间距 */
  text-align: right;
  font-size: 1.5em; /* 适当增大字体大小，突出总价显示 */
  font-weight: bold;
  color: #333; /* 设置总价文字颜色，与整体风格协调 */

  /* 调整购买按钮的样式，使其与总价在视觉上更协调 */
  display: flex;
  align-items: center;
  gap: 10px;
}

/* 单独设置购买按钮的样式 */
.total-price.el-button {
  background-color: #28a745; /* 绿色，可根据需求调整颜色 */
  padding: 12px 30px; /* 适当增加内边距 */
  font-size: 18px; /* 适当增大字体大小 */
}

.total-price.el-button:hover {
  background-color: #218838; /* 鼠标悬停时的颜色 */
}
</style>